<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<style>
.box{
    height: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #abcdef;
    overflow: hidden;
    transition: height 2s;
}
.box img{
    width: 150px;
    height: 100px;
}
</style>
<body>
<div class="box">
    <img src="./images/1.jpg" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</div>
<button>按钮</button>
</body>
<script>
// 点击按钮让div的高度设置为120
var btn = document.querySelector("button");
var div = document.querySelector(".box");
btn.onclick = function(){
    // 获取div的高度
    // var h = getStyle(div,'height');
    // h = parseInt(h)

    var h = div.clientHeight;
    // console.log(h);
    // 设置div的样式
    if(h==0){
        div.style.height = '120px';
    }else{
        div.style.height = 0;
    }
}
// 点击图片，将网页的背景设置成这个图片
// 网页背景就是设置body的background-image
// var imgs = document.querySelectorAll(".box img");
// for(var i=0;i<imgs.length;i++){
//     imgs[i].onclick = function(){
//         console.log(this);
//         // 先获取当前点击的这个图片的src
//         var path = this.getAttribute('src');
//         console.log(path);
//         document.body.style.backgroundImage = 'url(' + path + ')';
//         document.body.style.backgroundRepeat = 'no-repeat';
//         document.body.style.backgroundSize = '100% 100%';
//         div.style.height = 0
//     }
// }
// 获取样式
// function getStyle(ele,attr){
//     if(window.getComputedStyle){
//         return window.getComputedStyle(ele)[attr]
//     }else{
//         return ele.currentStyle[attr];
//     }
// }

// 3中情况的this
// 1.全局中的this - window
// console.log(this);
// // 2.普通函数中的this - window
// function fn(){
//     console.log(this);
// }
// fn()
// 3.事件函数中的this
// btn.onclick = function(){
//     console.log(this);
// }

// div.onclick = function(){
//     console.log(this);
// }





var imgs = document.querySelectorAll(".box img");
// console.log(imgs);
// imgs[0].onclick = function(){
//     console.log(this);
// }
// imgs[1].onclick = function(){
//     console.log(this);
// }
// imgs[2].onclick = function(){
//     console.log(this);
// }
for(var i=0;i<imgs.length;i++){
    imgs[i].onclick = function(){
        console.log(this);
    }
}

// for(var i=0;i<imgs.length;i++){
//     imgs[i].onclick = function(){
//         console.log(this);
//         // 先获取当前点击的这个图片的src
//         var path = this.getAttribute('src');
//         console.log(path);
//         document.body.style.backgroundImage = 'url(' + path + ')';
//         document.body.style.backgroundRepeat = 'no-repeat';
//         document.body.style.backgroundSize = '100% 100%';
//         div.style.height = 0
//     }
// }
</script>
</html>